<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="renderer" content="webkit">
<title></title>
<link rel="stylesheet" href="__CSS__/pintuer.css?v={$src_version}">
<link rel="stylesheet" href="__CSS__/admin.css?v={$src_version}">
<link rel="stylesheet" href="__CSS__/responsive.css?v={$src_version}">
<script src="__JS__/jquery-3.2.1.min.js?v={$src_version}"></script>
<script src="__JS__/pintuer.js?v={$src_version}"></script>
<script src="__JS__/jquery.nicescroll.js"></script>
<script src="__PUBLIC__/layer.js?v={$src_version}"></script>
<script src="__JS__/ming.js?v={$src_version}"></script>
<script src="__JS__/ifram_scroll.js?v={$src_version}"></script>
<script src="__JS__/plupload.full.min.js?v={$src_version}"></script>
<script src="__JS__/responsive.js?v={$src_version}"></script>   
</head>
<body>
<div class="panel admin-panel">
  <div class="panel-head"><strong><span class="icon-key"></span> 增加/修改</strong></div>
  <div class="body-content">
    <form method="post" class="form-x" id="frm" action="?">
           <div class="form-group">
            <div class="label">
              <label><strong style="color:#f00;">*</strong>所属分类</label>
            </div>
            <div class="field">
              <select name="ztype" class="input w50" id="ztype">
                  <option value="0">请选择分类</option>
                  <volist name=":C('ztype')" id="v">
                  <option value="{$v.val}"  <if condition="$edit['ztype'] eq $v['val']"> selected </if> >{$v.txt}</option>
                  </volist>
                  
                </select>
   
            </div>
          </div>      

       <div class="form-group">
        <div class="label">
          <label><strong style="color:#f00;">*</strong>标题：</label>
        </div>
        <div class="field">
        
          <input type="text" class="input w50" id="slide_title"  value="{$edit.slide_title}"  name="slide_title"   maxlength="100"   />  
       
        </div>
      </div>
        <div class="form-group">
        <div class="label">
          <label><strong style="color:#f00;">*</strong>图片：</label>
        </div>
        <div class="field">
      
           <input type="button" class="button bg-blue  " id="upload_btn" value="+ 浏览上传"  style="float:left;">
          <div id="single_pic">
            <if condition="$edit['pic'] neq ''">
            
               <div class="item" id="file-{$edit.slid}">
                <input type="hidden" name="pic" value="{$edit.pic}">
                  <img src="/{$edit.pic}" style="max-height:100px; max-width:100px;" /> 
                  <div class="operate del" data-val="{$edit.slid}" > </div>
                  
                </div>
            
            </if>
          
          
          </div>
          
          
        </div>
      </div>   
    <div class="form-group">
        <div class="label">
          <label>链接：</label>
        </div>
        <div class="field">
        
          <input type="text" class="input w50" id="url"  value="{$edit.url}"  name="url"   maxlength="200"   />  
       
        </div>
      </div>

        <div class="form-group">
        <div class="label">
          <label>排序：</label>
        </div>
        <div class="field">
          <input type="text" class="input w50"  maxlength="11"   value="{$edit.sort}" name="sort"   />  
       
        </div>
      </div>
  
      
      
      <div class="form-group">
        <div class="label">
          <label></label>
        </div>
        <div class="field">
        <input type="hidden"    value="{$edit.slid}" name="id" />
        <input type="hidden" value="add"  name="act" />
          <div class="button-group">
             <a class="button bg-main" href="javascript:;" id="sbt">
               <span class="icon-check-square-o"></span> 提交
             </a>  
       
             <a class="button border-main" href="javascript:history.go(-1)">
             <span class="icon-mail-reply"></span> 返回</a>
           </div>
        </div>
      </div>      
    </form>
  </div>
</div>

 
 
<script type="text/javascript">

      	var uploader = new plupload.Uploader({ 
		//实例化一个plupload上传对象
		browse_button : 'upload_btn',
		url : "{:U('Slide/add')}",
		//flash_swf_url : '__JS__/Moxie.swf',
		//silverlight_xap_url : '__JS__/Moxie.xap',
		filters: {
		  mime_types : [ 
		  //只允许上传图片文件
		    { title : "图片文件", extensions : "jpg,gif,png" }
		  ],
		  prevent_duplicates: true //不允许选取重复文件
		},
		
		 multipart:false,
		 
		// auto_start:false,
	
     
	});
    
 
	uploader.init(); //初始化
	
	
	 
	//绑定文件添加进队列事件
	uploader.bind('FilesAdded',function(uploader,files){
		
		var icon=document.getElementsByName('pic');
		
		//console.log(icon.length);
		
	    var is_have= (typeof(icon)!='undefined'&&icon!='')&&icon.length>0?true:false;
	
		if (uploader.files.length > 1||is_have) {
			
               uploader.splice(1, 1);
			   
			   layer.msg('只能上传一张图片');
			   
			   return;
          }
 
		for(var i = 0, len = files.length; i<len; i++){
 
			var file_name = files[i].name; //文件名
			 
			var html='<div class="item" id="file-' + files[i].id +'">  <div class="operate del" data-val="' + files[i].id +'" > </div> </div>';
			$(html).appendTo('#single_pic');
			!function(i){
				previewImage(files[i],function(imgsrc){
		 $('#file-'+files[i].id).append('<input type=hidden name="pic" value="' +imgsrc + '"><img src="'+ imgsrc +'" style="max-height:100px; max-width:100px;" /> \n');
				})
		    }(i);
		}
	});
          
            $(function() {
               
              
                $(document).on("click",".del", function() {
					
                    $(this).parent(".item").remove();
					
					   var toremove = '';
                       var id = $(this).attr("data-val");
                       for (var i in uploader.files) {
                       if (uploader.files[i].id === id) {
                             toremove = i;
                        }
                      }
                     uploader.files.splice(toremove, 1);
					
                })
            })
			
	uploader.bind('StateChanged', function(uploader) {
    if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
           $('form')[0].submit();
       }
    });		
			
			
	//plupload中为我们提供了mOxie对象
	//有关mOxie的介绍和说明请看：https://github.com/moxiecode/moxie/wiki/API
	//如果你不想了解那么多的话，那就照抄本示例的代码来得到预览的图片吧
	function previewImage(file,callback){
		//file为plupload事件监听函数参数中的file对象,callback为预览图片准备完成的回调函数
		if(!file || !/image\//.test(file.type)) return; //确保文件是图片
		if(file.type=='image/gif'){
			//gif使用FileReader进行预览,因为mOxie.Image只支持jpg和png
			var fr = new mOxie.FileReader();
			fr.onload = function(){
				callback(fr.result);
				//fr.destroy();
				fr = null;
			}
			fr.readAsDataURL(file.getSource());
		}else{
			var preloader = new mOxie.Image();
			preloader.onload = function() {
				//preloader.downsize( 300, 300 );//先压缩一下要预览的图片,宽300，高300
				var imgsrc = preloader.type=='image/jpeg' ? preloader.getAsDataURL('image/jpeg',80) : preloader.getAsDataURL(); //得到图片src,实质为一个base64编码的数据
				callback && callback(imgsrc); //callback传入的参数为预览图片的url
				preloader.destroy();
				preloader = null;
			};
			preloader.load( file.getSource() );
		}	
	}
  //最后给"开始上传"按钮注册事件
    document.getElementById('sbt').onclick = function(){
		
	   var ztype=$('#ztype').val();
	 
	  if(ztype=='0'){
		  layer.msg('请选择所属分类');
		  return ;
		  
		  }
	  var slide_title=$.trim($('#slide_title').val());
	    if(slide_title==''){
		  layer.msg('请填写标题');
		  return ;
		  
		  }
	  var pic=$.trim($("input[name='pic']").val());
	    if(pic==''){
		  layer.msg('请上传图片');
		  return ;
		  
		  }	
		
        uploader.start(); //调用实例对象的start()方法开始上传文件，当然你也可以在其他地方调用该方法
    }
	
	
	
	
</script>


</body></html>